<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    img {
        width: 100px;
        height: 100px;
    }

    * {
        list-style: none;
    }

    div {
        display: inline-block;
        width: 200px;
        height: 200px;
        border: 1px black solid;
        box-sizing: border-box;
        padding: 20px;
    }

    .gwc {
        width: 100px;
        height: 30px;
        margin-left: 50px;
    }
</style>

<body>
    <h2>天猫</h2>
    <ul>

    </ul>
    <button class="gwc">购物车</button>

    <script>
        var arr = [{
            id: 0,
            name: '卸妆油',
            price: 88,
            num: 1,
            is: false,
            img: 'https://img13.360buyimg.com/jdcms/s480x480_jfs/t1/252559/18/26264/165869/67c053bbF38027221/f35bbdc09edfffa2.jpg.avif'
        }, {
            id: 1,
            name: '奶粉',
            price: 168,
            num: 1,
            is: false,
            img: 'https://img13.360buyimg.com/jdcms/s480x480_jfs/t1/160379/29/46140/109025/663b1fa9F31decda6/0d1b978e4dc34d6a.jpg.avif'
        }, {
            id: 2,
            name: '七巧板',
            price: 28,
            num: 1,
            is: false,
            img: 'https://img14.360buyimg.com/jdcms/s480x480_jfs/t1/254089/25/15740/148957/6791a849F48739250/02d486aa5d3d1bcd.jpg.avif'
        },]
        
        

        arr.forEach(item => {
            document.querySelector('ul').innerHTML += `<div>
                <li><img src="${item.img}"></li>
                <li>${item.name}</li>
                <li>￥${item.price}</li>
                <li><button onclick='xq(${item.id})'>详情</button></li>
            </div>`
        })

        function xq(id) {
            // var arr2 = []
            arr.forEach(item => {
                if (item.id == id) {
                    // arr2.push(item)
                    localStorage.setItem('good', JSON.stringify(item))
                    location.assign('./2.28机试详情页.html')
                }
            })
        }

        localStorage.setItem('all', JSON.stringify(arr))

        document.querySelector('.gwc').addEventListener('click', () => {
            location.assign('./2.28机试购物车.html')
        })

    </script>
</body>

</html>